<template>
  <!--基础用法-->
  <modelDefault v-model="person.name"></modelDefault>
  <hr>
  <!--校验-->
  <modelCheck v-model="person.name"></modelCheck>
  <hr>
  <!--多个model-->
  <modelMore
    v-model:name="person.name"
    v-model:age="person.age"
  ></modelMore>
  <hr>
  <!--修饰符-->
  <modelCapitalize v-model.capitalize="person.name"></modelCapitalize>
  <hr>
  <!--修饰符，多model-->
  <modelCapitalizeMore
    v-model:name.capitalize="person.name"
    v-model:age.capitalize="person.age"
  ></modelCapitalizeMore>
  <hr>
  <!--泛型-->
  <modelTs v-model="person"></modelTs>
  <hr>
  <!--generic用法-->
  <modelGeneric v-model="person"></modelGeneric>
  <hr>
  <!--修饰符-->
  <h1>修饰符的骚操作</h1>
  <el-row>
    <el-col :span="2">姓名：</el-col>
    <el-col :span="6"><myInput v-model.name="person"></myInput></el-col>
  </el-row>
  <el-row>
    <el-col :span="2">年龄：</el-col>
    <el-col :span="6"><myInput v-model.age="person"></myInput></el-col>
  </el-row>
  <br>
  <hr>
  <!--修饰符-->ss
  <modelProps v-model:name.name1="person"></modelProps>
</template>


<script setup lang="ts">
  import { reactive } from 'vue'
  import modelDefault from './son-default.vue'
  import modelMore from './son-more.vue'
  import modelCheck from './son-check.vue'
  import modelCapitalize from './son-capitalize.vue'
  import modelCapitalizeMore from './son-capitalize-more.vue'

  import modelProps from './son-props-capitalize.vue'

  import modelTs from './son-ts.vue'
  import modelGeneric from './son-generic.vue'
  import myInput from './my-input.vue'

  const props = defineProps({
    
  })

  const person = reactive({
    name: 'jyk',
    age: 15
  })

</script>